<template>
  <div class="login">
    <!-- 导航栏
          van-nav-bar
                title:标题
                left-text:左边文本
                right-text:右边文本
                left-arrow
                @click-left:左边点击
                @click-right:左边点击
         输入框
            van-field
               v-model:双向绑定
               label:标题
           按钮
             van-button
                type:颜色等样式
                block:块级
                round:圆角
    表单验证
       基本表单验证
       1：形成表单
          van-form将元素包住
       2:写验证规则
          van-field  :rules="rules.mobile"
         rules:{
           mobile:[
           {required:true,message:'错误信息',trigger:'onBlur/onChange'},
           {pattern:正则表态式,message:'错误信息',trigger:'onBlur/onChange'}
           ]
         }
          -->
    <!-- 全局表单验证：对整 个表单进行验证
    实际调用el-form组件内的一个validate方法（el-form组件的methods内） -->
    <!-- ref方式： -->
    <!-- 1：获取dom -->
    <!-- 2:获取组件实例对象（组件的this）   -->
    <!-- a:el-form  ref="form" -->
    <!-- b:this.$refs.form.validate().then(()=>{成功}).catch(()=>{失败})  -->

    <van-nav-bar title="登录"></van-nav-bar>
    <div class="main">
      <van-form ref="form">
        <van-field
          label="手机号"
          v-model="form.mobile"
          :rules="rules.mobile"
        ></van-field>
        <van-field
          :rules="rules.code"
          label="验证码"
          v-model="form.code"
          @keyup.enter="submit"
        ></van-field>
      </van-form>
      <van-button :loading="loading" type="info" block round @click="submit"
        >登录</van-button
      >
    </div>
  </div>
</template>
<script>
import { authorizations } from '@/api/user.js'
// import { setToken } from '@/utils/auth'
export default {
  data () {
    return {
      loading: false,
      form: {
        mobile: '13665656599',
        code: '246810'
      },
      rules: {
        mobile: [
          // 必填
          { required: true, message: '必填', trigger: 'onChange' },
          // 正则验证
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请正确输入手机号',
            trigger: 'onChange'
          }
        ],
        code: [
          { required: true, message: '必填', trigger: 'onChange' },
          {
            pattern: /^\d{6}$/,
            message: '请正确输入验证码',
            trigger: 'onChange'
          }
        ]
      }
    }
  },
  methods: {
    async submit () {
      // 全局的表单验证
      this.$refs.form
        .validate()
        .then(async () => {
          this.loading = true
          try {
            const res = await authorizations(this.form)
            this.loading = false
            /*
            登录成功
            1：提示一下
            2：存储token,token存储到localstorage
            3:跳转到首页
            */
            this.$toast.success('登录成功')
            // 存储token
            // token是响应式数据吗？不是，实际 开发时token是可能更新了
            // vue公共数据是存储在vuex
            // 实际开发都是存储vuex
            // setToken(JSON.stringify(res.data.data))
            this.$store.commit('setTokenObj', res.data.data)
            const back = this.$route.query.back
            this.$router.push(back || '/layout/home')
          } catch (error) {
            this.loading = false
            //   alert(error.response.data.message)
            //   console.log('error', error)
          }
          // 只要请求失败都应该提示一下，不希望每个接口都写try,catch

          // authorizations(this.form)
          //   .then(res => {
          //     this.loading = false
          //     console.log('ok', res)
          //   })
          //   .catch(error => {
          //     this.loading = false
          //     alert(error.response.data.message)
          //     console.log('error', error)
          //   })
          // .finally(() => {
          //   this.loading = false
          // })
          // const res = await authorizations(this.form)
          // this.loading = false
          // console.log(res)
          // console.log('成功')
        })
        .catch(() => {
          // console.log('失败')
        })
    }
  }
}
</script>
<style lang="less" scoped>
.main {
  padding: 0 20px;
}
</style>
